<template>
  <el-dialog
    v-model="visible"
    :before-close="close"
    :title="$t('product.chooseSupplier')"
    :append-to-body="true"
    top="100px"
    :close-on-click-modal="false"
  >
    <el-form
      :inline="true"
      class="demo-form-inline"
      @submit.prevent
    >
      <el-form-item :label="$t('shop.supplierName')">
        <el-input
          v-model="supplierName"
          class="input-width"
          :placeholder="$t('shop.supplierName')"
          clearable
        />
      </el-form-item>
      <el-form-item>
        <el-button
          type="primary"
          @click="searchProd"
        >
          {{ $t("order.query") }}
        </el-button>
      </el-form-item>
      <el-form-item>
        <el-button
          @click="clean"
        >
          {{ $t("temp.setNull") }}
        </el-button>
      </el-form-item>
    </el-form>

    <div class="prods-select-body">
      <el-table
        ref="prodTableRef"
        v-loading="dataListLoading"
        :data="dataList"
        border
        style="width: 100%;"
      >
        <el-table-column
          v-if="props.isSingle"
          width="50"
          header-align="center"
          align="center"
        >
          <template #default="scope">
            <div>
              <el-radio
                v-model="singleSelectSupplierId"
                :label="scope.row.supplierId"
                @change="getSelectProdRow(scope.row)"
              >
&nbsp;
              </el-radio>
            </div>
          </template>
        </el-table-column>
        <el-table-column
          v-if="!props.isSingle"
          type="selection"
          header-align="center"
          align="center"
          width="50"
        />
        <el-table-column
          prop="supplierName"
          header-align="center"
          align="center"
          :label="$t('shop.supplierName')"
        />
        <el-table-column
          prop="tel"
          header-align="center"
          align="center"
          :label="$t('shop.tel')"
        >
          <template #default="scope">
            <span>{{ scope.row.tel || '-' }}</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="contactName"
          header-align="center"
          align="center"
          :label="$t('shop.contactName')"
        >
          <template #default="scope">
            <span>{{ scope.row.contactName || '-' }}</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="contactTel"
          header-align="center"
          align="center"
          :label="$t('shop.contactTel')"
        >
          <template #default="scope">
            <span>{{ scope.row.contactTel || '-' }}</span>
          </template>
        </el-table-column>
        <el-table-column
          header-align="center"
          align="center"
          :label="$t('product.status')"
        >
          <template #default="scope">
            <el-tag
              v-if="scope.row.status === 1"
            >
              {{ $t("groups.startUsing") }}
            </el-tag>
            <el-tag
              v-if="scope.row.status === 0"
              type="danger"
            >
              {{ $t("publics.disable") }}
            </el-tag>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        :current-page="page.currentPage"
        :page-sizes="[10, 20, 50, 100]"
        :page-size="page.pageSize"
        :total="page.total"
        layout="total, sizes, prev, pager, next, jumper"
        class="supplier-select-pageination"
        @update:page-size="onPageSizeChange"
        @update:current-page="onPageChange"
      />
    </div>
    <template #footer>
      <span>
        <el-button @click="close">{{ $t("crud.filter.cancelBtn") }}</el-button>
        <el-button
          type="primary"
          @click="submitProds()"
        >{{ $t("crud.filter.submitBtn") }}</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script setup>
const emit = defineEmits(['refreshSelectSupplier'])

const visible = ref(false)
const singleSelectSupplierId = ref(0)
const selectProds = ref([])
const supplierName = ref('')

const dataList = ref([])
const page = reactive({
  total: 0, // 总页数
  currentPage: 1, // 当前页数
  pageSize: 10 // 每页显示多少条
})

const dataListLoading = ref(false)
let dataListSelections = []
const props = defineProps({
  isSingle: {
    default: false,
    type: Boolean
  }
})

onActivated(() => {
  getDataList()
})

// 获取数据列表
const init = (selectProdsParam) => {
  singleSelectSupplierId.value = 0
  selectProds.value = selectProdsParam.supplierId
  visible.value = true
  dataListLoading.value = true
  if (selectProdsParam) {
    selectProdsParam.forEach(row => {
      dataListSelections.push(row)
    })
  }
  getDataList()
}

const prodTableRef = ref(null)
const getDataList = () => {
  http({
    url: http.adornUrl('/supplier/supplier/page'),
    method: 'get',
    params: http.adornParams(
      Object.assign(
        {
          status: 1,
          current: page.currentPage,
          size: page.pageSize,
          supplierName: supplierName.value || null
        }
      )
    )
  }).then(({ data }) => {
    dataList.value = data.records
    page.total = data.total
    dataListLoading.value = false
    if (selectProds.value) {
      nextTick(() => {
        selectProds.value.forEach(row => {
          const index = dataList.value.findIndex((prodItem) => prodItem.supplierId === row.supplierId)
          prodTableRef.value.toggleRowSelection(dataList.value[index])
        })
      })
    }
  })
}
// 每页数
const onPageSizeChange = (val) => {
  page.pageSize = val
  page.currentPage = 1
  getDataList()
}
// 当前页
const onPageChange = (val) => {
  page.currentPage = val
  getDataList()
}
// 单选商品事件
const getSelectProdRow = (row) => {
  dataListSelections = [row]
}
/**
 * 根据条件搜索商品
 */
const searchProd = () => {
  page.currentPage = 1
  getDataList()
}
/**
 * 清空搜索条件
 */
const clean = () => {
  supplierName.value = ''
}
const close = () => {
  clean()
  visible.value = false
}
// 确定事件
const submitProds = () => {
  const suppliers = []
  dataListSelections.forEach(item => {
    const supplierIndex = suppliers.findIndex((supplier) => supplier.supplierId === item.supplierId)
    if (supplierIndex === -1) {
      suppliers.push(
        {
          supplierId: item.supplierId,
          supplierName: item.supplierName
        }
      )
    }
  })
  emit('refreshSelectSupplier', suppliers)
  dataListSelections = []
  selectProds.value = []
  visible.value = false
}

defineExpose({
  init
})

</script>
<style scoped>
.prods-select-body {
  height: 600px;
  overflow: auto;
  border-top: 1px solid #eeeeee;
  border-right: 1px solid #eeeeee;
  border-bottom: 1px solid #eeeeee;
}

.input-width{
  width: 240px;
}

.supplier-select-pageination{
  justify-content: flex-end;
  margin-top: 10px;
  margin-right: 10px;
}
</style>
